<template>
  <div class="app-container">
    <h4>排班管理</h4>
    <el-form ref="form" class="el_one" :model="queryParams">
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="员工账号:" prop="employeeNumber">
              <el-input v-model="queryParams.employeeNumber" placeholder="请输入员工账号" style="width: 280px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="员工姓名:" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入员工姓名" style="width: 280px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="工作模式:">
              <el-select v-model="queryParams.workPatternId" placeholder="请选择工作模式" style="width: 280px;">
                <el-option
                  v-for="item in dataWork"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="month-content">
            <el-form-item label="月份:">
              <el-date-picker
                v-model="queryParams.month"
                type="month"
                placeholder="选择月"
                style="width: 280px;"
                format="yyyy-MM"
                value-format="yyyy-MM"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content">
            <el-form-item label="所属机构:">
              <el-select ref="select" v-model="region" placeholder="请选择所属机构" style="width: 280px;">
                <el-option value="" style="display: none;" />
                <el-tree
                  :data="dataTerr"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="buttod-content" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item>
              <el-button type="danger" style="width: 90px" @click="fnSearch">搜索</el-button>
              <el-button style="width: 90px" @click="fnReset">重置</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="el-card__body">
      <el-button type="danger" style="width: 100px; margin-bottom: 10px;" @click="fnSetclass">排班设置</el-button>
      <el-button type="danger" style="width: 100px;">绑定排班</el-button>
      <el-table
        stripe
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="60"
        />
        <el-table-column
          fixed
          prop="employeeNumber"
          label="员工账号"
          width="100"
        />
        <el-table-column
          fixed
          prop="name"
          label="员工姓名"
          width="120"
        />
        <el-table-column
          fixed
          prop="phone"
          label="员工电话"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          fixed
          :formatter="fnFormatterUserType"
          prop="userType"
          label="员工角色"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          fixed
          prop="workPatternName"
          width="110"
          label="当前工作模式"
          show-overflow-tooltip
        />
        <el-table-column
          v-for="(item,index) in days"
          :key="index"
          prop="address"
          width="40"
          align="center"
          :label="(index + 1).toString()"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <span
              :class="{true:row.workSchedules[index],false:!row.workSchedules[index]}"
              style="display: block;width: 24px;height: 24px;border-radius: 50%;text-align: center;line-height: 24px; font-size: 13px;"
            > {{ row.workSchedules[index] ? "上" : "休" }} </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCalss, getTree, getWork } from '@/api/staff'
export default {
  name: 'PaibanPage',
  data() {
    return {
      defaultProps: {
        children: 'children', // 控制树形的子集
        label: 'name' // 控制树形节点显示的文字
      },
      queryParams: {
        name: '',
        workPatternId: '',
        month: '',
        userType: '',
        employeeNumber: '',
        page: 1,
        pageSize: 10,
        agencyId: ''
      },
      region: '',
      dataWork: [],
      dataTerr: [],
      list: [],
      days: 31,
      counts: 0
    }
  },
  created() {
    this.getCalss()
    this.getTree()
    this.getWork()
  },
  methods: {
    fnSetclass() {
      this.$router.push('/user/setclass')
    },
    // 工作模式数据
    async getWork() {
      const res = await getWork()
      console.log(res)
      this.dataWork = res[1]
    },
    async getTree() {
      const result = await getTree()
      console.log(JSON.parse(result))
      this.dataTerr = JSON.parse(result)
    },
    async getCalss() {
      const result = await getCalss({
        page: this.queryParams.page,
        pageSize: this.queryParams.pageSize
      })
      console.log(result)
      this.list = result.items
      this.counts = result.counts
    },
    // 每页条数切换得处理函数
    handleSizeChange(newPageSize) {
      this.queryParams.pageSize = newPageSize
      this.getCalss()
    },
    // 当前页码处理的函数
    handleCurrentChange(newpage) {
      // 修改当前页码,重新发起请求
      this.queryParams.page = newpage
      this.getCalss()
    },
    // 员工角色渲染
    fnFormatterUserType(row, column, cellValue) {
      return cellValue === 1 ? '员工' : cellValue === 2 ? '快递员' : cellValue === 3 ? '司机' : '无'
    },
    handleNodeClick(data) {
      this.region = data.name
      this.queryParams.agencyId = data.id
      this.$refs.select.blur()
    },
    // 搜索
    async fnSearch() {
      console.log(this.queryParams)
      const res = await getCalss(this.queryParams)
      console.log(res)
      this.list = res.items
      this.counts = res.counts
    },
    // 重置
    fnReset() {
      this.region = ''
      this.queryParams.workPatternId = ''
      this.queryParams.month = ''
      this.queryParams.page = 1
      this.$refs.form.resetFields()
      this.getCalss()
    }
  }
}
</script>

<style lang="scss">
.el_one{
  width: 100%;
  height: 150px;
  background-color: #fff;
}
.grid-content{
  margin-left: 40px;
  margin-top: 20px;
}
.institution-content{
  margin-left: 40px;
}
.month-content{
  margin-left: 69px;
}
.el-card__body{
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
  padding:28px 28px 28px 28px;
}
.block{
  margin-left: 330px;
  margin-top: 20px;
}
.true {
  background-color: #ffeeeb;
  border: 1px solid #e46145;
}
.false {
  background-color: #ccc;
  border: 1px solid #ccc;
}
</style>
